<template>
  <view class="content">
    <view class="navbarborder"></view>
    <view class="card">
      <view class="top">
        <view class="img">
          <image src="../../static/logo.png" mode=""></image>
        </view>
      </view>
      <view class="bottom">
        <view class="view">
          <view class="name">
            <view class="text">
              某某设计有限公司
            </view>
          </view>
          <view class="bottom">
            金牌团队
          </view>
        </view>
      </view>
    </view>
   <view class="main">
      <view class="code">
        团队邀请码
      </view>
      <view class="codevalue">
        <view class="left">
          sad323232
        </view>
        <view class="right">
          复制
        </view>
      </view>
    </view>
    <view class="box">
      <view class="view">
         <view class="img">
            <image src="../../static/team/weixin.png" mode=""></image>
         </view>
         <view class="text">
           微信
         </view>
      </view>
      <view class="view">
        <view class="img">
           <image src="../../static/team/pengyouquan.png" mode=""></image>
        </view>
        <view class="text">
          朋友圈
        </view>
      </view>
      <view class="view">
        <view class="img">
           <image src="../../static/team/fuzhi.png" mode=""></image>
        </view>
        <view class="text">
          复制链接
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
 const dataList = ref([])
 const form = reactive({
   pageNo: 1,
   pageSize: 10,
   username: ''
 })
 const paging = ref(null)
 const queryList = (pageNo, pageSize) => {
   form.pageNo = pageNo
   // 此处请求仅为演示，请替换为自己项目中的请求
   // getUserList(form).then(res => {
   // if (res.code == 0) {
   dataList.value = dataList.value.concat([])
   // total.value = res.result.total
   paging.value.complete([]);
   // }
   // })
 }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .navbarborder{
      height: 0;
      border-top: 2rpx solid #EEEEEE;
    }
    .card{
      width: 100%;
      height: 100%;
      background-color: #fff;
      .top{
        width: 100%;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .img{
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
          border: 1rpx solid #EEEEEE;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
      .bottom{
        width: 100%;
        .view{
          width: 100%;
          padding-bottom: 20rpx;
          .name{
            display: flex;
            justify-content: center;
            align-items: center;
            .text{
              font-size: 32rpx;
              font-weight: 700;
            }
          }
          .bottom{
            margin: 30rpx auto;
            width: 150rpx;
            padding: 5rpx 15rpx;
            text-align: center;
            color: #fff;
            font-size: 16rpx;
            border-radius: 10rpx;
            background-color: red;
          }
        }
      }
    }
    .main{
      width: 100%;
      height: 100%;
      background-color: #fff;
      .code{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .codevalue{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20rpx;
        .left{
          width: 200rpx;
          height: 50rpx;
          line-height: 50rpx;
          // border: 1rpx solid red;
        }
        .right{
          width: 150rpx;
          // border: 1rpx solid orange;
          padding: 5rpx;
          text-align: center;
          color: #fff;
          font-size: 16rpx;
          border-radius: 10rpx;
          background-color: rgb(0, 117, 255);
        }
      }
    }
    .box{
      width: 100%;
      height: 300rpx;
      margin-top: 20rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .view{
        width: 200rpx;
        height: 150rpx;
        // border: 1rpx solid red;
        .img{
          margin: 0 auto;
          width: 100rpx;
          height: 100rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .text{
          text-align: center;
          height: 50rpx;
          line-height: 50rpx;
        }
      }
    }
  }
</style>